<template>
  <div class="cicle-list">
    <InstrumentPanel
    style="transform:scale(0.8)"
      v-for="(item, index) in panelList"
      :key="index"
      :safeDialog="'0'"
      :facMessage="'1'"
      :showData="item"
    ></InstrumentPanel>
  </div>
</template>

<script>
export default {
  components: {
    InstrumentPanel: {
      template: `
      <div class='InstrumentPanel'>
    <!-- 仪表盘 这个组件里的是模拟数据.真实数据用同名组件 参数的使用写在工地人员sitepeople-->
    <div class='peoplePanel'>
      <img v-if="type === 'water'"
           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/4d79afcfdc85b79a3ad77f75e2efe788.png'
           alt=''>
      <img v-if="type === 'video'"
           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/07321647485e919d99367e00250ebbbc.png'
           alt=''>
      <img v-if="type === 'energy'"
           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/0a7ea67b7e7a943d6c182154345b24e5.png'
           alt=''>
      <img v-if="type === 'noise'"
           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/ef2dcabd648c5bfc436c5ac9d7f1bdad.png'
           alt=''>
      <img v-if="type === ''"
           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/4503ceffa5cea0b3351668403f4a4e1e.png'
           alt=''>
      <div class='panel'
           style='width:180px;height:170px'
           :id='randomId'></div>

      <p class='showNum'
         v-if="typeImg !== 'thing' && siteMessage !== '1' && facMessage !== '1' "
         :style="{color : showData.warn ==='1' ? '#FF0000' : '#00ffff' }">
       
        <!-- 中间的数字内容 -->
        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}<span v-if='showData.unit'
              class='unit'>{{ showData.unit }}</span>
      </p>
      <!-- 材料物资特有  其他的不要传 typeImg -->
      <p class='showNum'
         style='color:#00ffff;  cursor: pointer;'
         v-if="typeImg === 'thing' ">
        <!-- 中间的数字内容 -->
        <span> {{ showData.percent === '1' ? showData.value + '%' : showData.value
          }} </span>
        <!-- 这里不判断 市场行情没有单位,仅占位 -->
        <span class='unit thingUnit'>{{ showData.unit }}</span>
        <img class='thingImg'
             v-if="showData.market!=='1'"
             @click='changeUnit(showData.title)'
             src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/03019df2f5e4adf139a6948978b0442c.png'
             alt=''>
        <span v-if="showData.market ==='1'"
              class='unit thingUnit'
              style='margin-top:20px'>元/吨</span>
      </p>

      <!-- 项目级场地环境弹窗 -->
      <p class='showNum'
         v-if="siteMessage === '1'"
         style='color:#00ffff;  cursor: pointer;'>
        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}
        <span v-if='showData.unit'
              class='unit'>{{ showData.unit }}</span>
      </p>
      <!-- 质量检查汇总弹窗 -->
      <p class='showNum'
         v-if="facMessage === '1'"
         style='color:#00ffff;  cursor: pointer;'>
        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}<span v-if='showData.unit'
              class='unit'>{{ showData.unit }}</span>
      </p>
    </div>

  </div>
      `,
      data() {
        return {
          chart: null,
          randomId: 0,
          openVisibile: false,
          siteMessageVisibile: false,
          facMessageVisibile: false
        };
      },
      props: {
        showData: Object,
        type: {
          type: String,
          default: () => {
            return '';
          }
        },
        typeImg: {
          //材料物资
          type: String,
          default: () => {
            return '';
          }
        },
        siteMessage: {
          //项目级场地环境信息弹窗
          type: String,
          default: () => {
            return '';
          }
        },
        facMessage: {
          //项目级质量检查弹窗
          type: String,
          default: () => {
            return '';
          }
        },
        safeDialog: String, //区分是质量弹窗还是安全  0是质量,1是安全
        warn: String
      },
      created() {},
      mounted() {
        let date = new Date();
        this.randomId = date.getTime() + parseInt(Math.random(0, 1) * 1000);
        let _this = this;
        this.$nextTick(() => {
          window.$loadScript('js', 'https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js').then(() => {
            _this.renderChart();
          });
        });
      },
      methods: {
        //切换单位
        changeUnit(title) {
          //点击图片切换单位和数值. 点击就把标题传到材料物资组件,在那边判断是调用哪一个函数把新的值再传回来
          //不可行的话把这个图片拿到材料物资页面写
          this.$emit('thingTitle', title);
        },
        renderChart() {
          //警告
          if (this.chart != null && this.chart != '' && this.chart != undefined) {
            this.chart.dispose();
          }
          this.chart = echarts.init(document.getElementById(this.randomId));
          //换行 处理title过长时换行
          let title = '';
          let titleLen = this.showData.title.length;
          if (titleLen > 8) {
            title = this.showData.title.slice(0, 3) + '\n' + this.showData.title.slice(3, titleLen);
          } else {
            title = this.showData.title;
          }
          const gaugeData = [
            {
              //如果返回的值是百分比就按返回的值,如果不是就按50%  改成这种显示方式的话之后传回来的this.showData.num直接不用了,可以删掉
              value: this.showData.percent == '1' || this.showData.value == 0 ? this.showData.value : 50,
              name: title,
              title: {
                offsetCenter: ['0%', '-30%']
              },
              detail: {
                valueAnimation: false,
                //中间文字位置
                offsetCenter: ['0%', '25%']
              }
            }
          ];
          let options = {
            series: [
              {
                type: 'gauge',
                radius: '80',
                startAngle: 240,
                endAngle: -60,
                itemStyle: {
                  //渐变色在 告警 warn的时候是红色,市场行情 market 的时候是蓝色
                  color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    {
                      offset: 1,
                      color:
                        this.showData.warn === '1' ? '#FF2944' : this.showData.market === '1' ? '#00BEFB' : '#00BEFB'
                    },
                    {
                      offset: 0.2,
                      color:
                        this.showData.warn === '1' ? '#FF6600' : this.showData.market === '1' ? '#4050FC' : '#CC00FC'
                    },
                    {
                      offset: 0,
                      color:
                        this.showData.warn === '1' ? '#FF6600' : this.showData.market === '1' ? '#4050FC' : '#CC00FC'
                    }
                  ])
                },
                pointer: {
                  show: false
                },
                progress: {
                  show: true,
                  overlap: false,
                  roundCap: true,
                  clip: false,
                  itemStyle: {
                    borderWidth: 0,
                    borderColor: '#464646'
                  }
                },
                axisLine: {
                  roundCap: true,
                  lineStyle: {
                    width: 11,
                    color: [[1, '#1B1464']],
                    shadowBlur: 5,
                    shadowColor: '#00BEFB'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false,
                  distance: -20,
                  color: '#999',
                  fontSize: 20
                },
                splitLine: {
                  show: false
                },
                data: gaugeData,
                title: {
                  fontSize: 14,
                  color: '#fff'
                },
                detail: { show: false }
              }
            ]
          };
          this.chart.clear();
          this.chart.resize();
          this.chart.setOption(options);
        }
      },
      computed: {},
      watch: {
        showData: {
          deep: true, //true为进行深度监听,false为不进行深度监听
          handler(newVal) {
            if (newVal) {
              this.renderChart();
            }
          }
        }
      }
    }
  },
  data() {
    return {
      panelList: []
    };
  },
  watch: {
    dataChart: {
      handler(val) {
        let data = val.data?val.data:{}
        //避免先加载假数据,不更新真实数据
        this.panelList = [
          { title: '隐患数', value: data.total },
          { title: '整改数量', value: data.close },
          { title: '待办数量', value: data.rectify }
        ]
        // list.forEach(item => {
        //   if (item.col_name === '检查数量') {
        //     this.panelList[0].value=item.col_value[0]
        //   } else if (item.col_name === '闭环数量') {
        //     this.panelList[1].value=item.col_value[0]
        //   } else if (item.col_name === '待整改数量') {
        //     this.panelList[2].value=item.col_value[0]
        //   }
        // })
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.panelList = [
    //   { title: '问题数', value: 74 },
    //   { title: '整改数量', value: 43 },
    //   { title: '待办数量', value: 23 }
    // ];
  }
};
</script>
<style>
.cicle-list {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.peoplePanel {
  position: relative;
}

.peoplePanel .panel {
  position: absolute;
  top: 33px;
  left: 30px;
}

.peoplePanel .showNum {
  position: absolute;
  top: 100px;
  width: 240px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
}

.peoplePanel .showNum .unit {
  display: block;
  font-size: 16px;
  font-weight: bold;
}

.thingUnit {
  font-size: 14px !important;
}

.thingImg {
  margin-top: 10px;
  width: 30px;
  height: 30px;
}
</style>
